<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>交付记录/订单明细</title>
		<script src="/js/vue.js"></script>
		<script src="/js/axios.js"></script>
		<script src="/js/qs.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
	</head>
	<body>

		<!-- 搜索 -->
		<br />
		<div id="bigbox">
			<div style="width: 100%;margin-left: 15px;display: block;" id="app1">
				<i class="el-icon-caret-right" style="line-height: 40px;margin-right: 5px; float: left;"></i>
				<template style="margin-top: 50px;">
					<el-select v-model="value7" filterable @change="findchange()" placeholder="全部数据" style="float: left;width: 120px; height: 60px;">
						<el-option v-for="item in allcomoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
				<i class="el-icon-search" style="line-height: 40px;float: left;margin-left: 10px; width: 50px; height: 50px;"></i>
				<!-- 搜索框 -->
				<div style="display: block;margin-left: -20px;float: left;margin-top: -4px;">
					<el-input style="width: 200px;" placeholder="" v-model="inputtheme">
						<el-button slot="append" @click="search()" style=" width: 80px;">
							订单
						</el-button>
					</el-input>
				</div>
			</div>
			<!-- 表单 -->
			<div style="width: 100%;float: left;" id="app2">
				<div style="float: left;margin-left: 30px;margin-top: -10px;">
					<p style="font-size: 13px;color: #333333;">交付计划/订单明细<a style="font-size: 12px;color: #807E7E;">&nbsp;共${page.total}条</a></p>
				</div>
				<div style="float: right;display: block;margin-right: 20px;margin-top: -10px;">
					<!-- 新建回款记录 -->
					<!-- <el-button size="small" icon="el-icon-circle-plus" @click="addoipage()" style="width: 80px;"> 新建</el-button> -->
					<!-- Form -->
					<el-dialog title="新增交付计划/订单明细" width="50%" :visible.sync="dialogFormVisible">
						<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
						<el-form :model="oiform" :rules="rules" ref="oiform" label-width="100px" class="demo-rmform" style="margin-top: 20px;">
							<el-form-item label="产品名称:" required prop="pname" :label-width="formLabelWidth">
								<el-select v-model="oiform.pname" @change="selectoprice()" clearable filterable="" style="width: 60%;" remote=""
								 reserve-keyword placeholder="请输入关键词" :remote-method="proremoteMethod" :loading="proloading">
									<i slot="prefix" class="el-input__icon el-icon-search"></i>
									<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="客户" required prop="comcustid" :label-width="formLabelWidth">
								<el-select v-model="oiform.comcustid" @clear="comcustidto()" @change="selectOne()" clearable filterable=""
								 style="width: 60%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="cumremoteMethod" :loading="cumloading">
									<i slot="prefix" class="el-input__icon el-icon-search"></i>
									<el-option v-for="item in customer" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="订单" required prop="orderid" :label-width="formLabelWidth">
								<!-- <el-autocomplete v-model="bmpform.orderid" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"
										 style="width: 60%;"></el-autocomplete> -->
								<el-select v-model="oiform.orderid" clearable filterable="" style="width: 60%;" remote="" reserve-keyword
								 placeholder="请输入关键词" :remote-method="orremoteMethod" :loading="orloading">
									<i slot="prefix" class="el-input__icon el-icon-search"></i>
									<el-option v-for="item in orderes" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-row>
								<el-col :span="12">
									<el-form-item label="单价:" required prop="price" :label-width="formLabelWidth">
										<el-input disabled v-model="oiform.price"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="折扣:" :label-width="formLabelWidth">
										<template>
											<el-input-number v-model="oiform.discount" :precision="2" :step="0.05" controls-position="right" @change="handleChange"
											 :min="0.1" :max="1" label="描述文字"></el-input-number>
										</template>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12">
									<el-form-item label="数量:" :label-width="formLabelWidth">
										<el-input-number v-model="oiform.count" controls-position="right" @change="handleChange" :min="0" label="描述文字"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="金额:" required prop="money" :label-width="formLabelWidth">
										<el-input disabled v-model="oiform.money" style="width: 33%;"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-form-item label="计划交付日期:" required prop="date" :label-width="formLabelWidth">
									<el-date-picker v-model="oiform.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-row>
							<el-row :gutter="20">
								<el-form-item label="所有者:" required prop="uid" :label-width="formLabelWidth" required>
									<el-select v-model="oiform.uid" @clear="uitemvto()" clearable filterable="" remote="" reserve-keyword
									 placeholder="请输入关键词" :remote-method="uidremoteMethod" :loading="uidloading">
										<i slot="prefix" class="el-input__icon el-icon-search"></i>
										<el-option v-for="item in uitemv" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-row>

							<el-form-item label="要求:" :label-width="formLabelWidth">
								<el-input type="textarea" style="width: 60%;" :rows="12" :autosize="{ minRows: 4 }" placeholder="" v-model="oiform.require"
								 style="width: 80%;"></el-input>
							</el-form-item>
							<el-form-item label="交付条件:" :label-width="formLabelWidth">
								<el-input type="textarea" style="width: 60%;" :rows="12" :autosize="{ minRows: 4 }" placeholder="" v-model="oiform.conditions"
								 style="width: 80%;"></el-input>
							</el-form-item>
							<el-form-item label="备注:" :label-width="formLabelWidth">
								<el-input type="textarea" style="width: 60%;" :rows="12" :autosize="{ minRows: 4 }" placeholder="" v-model="oiform.remark"
								 style="width: 80%;"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<!-- dialogFormVisible = false -->
							<el-button type="primary" @click="submitForm('oiform')">添加</el-button>
						</div>
					</el-dialog>

				</div>
			</div>

			<!-- 表单 -->
			<div id="app3" style="margin-left: 10px;">
				<template>
					<el-table ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" :data="oitable"
					 border style="width: 100%;color: black;">
						<el-table-column type="selection" width="35" align="center">
						</el-table-column>
						<el-table-column prop="ID" label="ID" width="60" align="center">
						</el-table-column>
						<el-table-column prop="pname" label="产品" align="center">
						</el-table-column>
						<el-table-column prop="count" width="60" label="数量" align="center">
						</el-table-column>
						<el-table-column prop="price" width="60" label="单价" align="center">
						</el-table-column>
						<el-table-column prop="discount" width="60" label="折扣" align="center">
						</el-table-column>
						<el-table-column prop="money" width="60" label="金额" align="center">
						</el-table-column>
						<el-table-column prop="date" width="100" label="计划交付日期" align="center">
						</el-table-column>
						<el-table-column prop="uid" label="所有者" align="center">
						</el-table-column>
						<el-table-column prop="custname" show-overflow-tooltip label="客户" align="center">
						</el-table-column>
						<el-table-column prop="title" show-overflow-tooltip label="订单" align="center">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100" align="center">
							<template slot-scope="scope">
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;" @click="deletenew(scope.row.ID)"></i>
								</el-tooltip>
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">编辑</div>
									<i class="el-icon-edit" @click="updatehandleClick(scope.row.ID)" style="font-size: 17px;"></i>
								</el-tooltip>
								<el-dialog title="提示" :visible.sync="dialogDelete" width="30%" append-to-body>
									<span>你确定要删除吗？</span>
									<span slot="footer" class="dialog-footer">
										<el-button @click="dialogDelete = false">取 消</el-button>
										<el-button type="primary" @click="dialogDelete = false" v-on:click="Delete">确 定</el-button>
									</span>
								</el-dialog>
								<div id="repairform" style="width: 90px;display: block; float: left;margin-left: 15px;">
									<el-dialog title="修改回款记录" :visible.sync="dialogFormVisible" width="70%" fullscreen append-to-body style="background-color: #E5E9F2;">

										<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
										<el-form-item label="对应客户:" required prop="comcustid" :label-width="formLabelWidth">
											<el-select v-model="rmform.comcustid" @clear="comcustidto()" @change="selectOne()" clearable filterable=""
											 style="width: 60%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="cumremoteMethod"
											 :loading="cumloading">
												<i slot="prefix" class="el-input__icon el-icon-search"></i>
												<el-option v-for="item in customer" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="订单" required prop="orderid" :label-width="formLabelWidth">
											<!-- <el-autocomplete v-model="bmpform.orderid" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"
															 style="width: 60%;"></el-autocomplete> -->
											<el-select v-model="rmform.orderid" clearable filterable="" style="width: 60%;" remote="" reserve-keyword
											 placeholder="请输入关键词" :remote-method="orremoteMethod" :loading="orloading">
												<i slot="prefix" class="el-input__icon el-icon-search"></i>
												<el-option v-for="item in orderes" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
										<el-row :gutter="20">
											<el-col :span="12">
												<el-form-item label="回款日期:" required prop="date1" :label-width="formLabelWidth">
													<el-date-picker v-model="rmform.date1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
													</el-date-picker>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="金额:" required prop="rmmoney" :label-width="formLabelWidth">
													<el-input v-model="rmform.rmmoney" style="width: 50%;"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row :gutter="20">
											<el-col :span="12">
												<el-form-item label="付款方式:" required prop="rmpay" :label-width="formLabelWidth">
													<el-select v-model="rmform.rmpay" placeholder="请选择">
														<el-option v-for="item in optionspay" :key="item.value" :label="item.label" :value="item.value">
														</el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="分类:" required prop="rmsort" :label-width="formLabelWidth">
													<el-select v-model="rmform.rmsort" placeholder="请选择">
														<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
														</el-option>
													</el-select>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row :gutter="20">
											<el-col :span="12">
												<!-- prop="uitemv" -->
												<el-form-item label="所有者:" required prop="uid" :label-width="formLabelWidth" required>
													<el-select v-model="rmform.uid" @clear="uitemvto()" clearable filterable="" remote="" reserve-keyword
													 placeholder="请输入关键词" :remote-method="uidremoteMethod" :loading="uidloading">
														<i slot="prefix" class="el-input__icon el-icon-search"></i>
														<el-option v-for="item in uitemv" :key="item.value" :label="item.label" :value="item.value">
														</el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<el-col :span="12">
											</el-col>
										</el-row>
										<el-form-item label="备注:" :label-width="formLabelWidth">
											<el-input type="textarea" :rows="12" :autosize="{ minRows: 1 }" placeholder="" v-model="rmform.textcommunication"
											 style="width: 80%;"></el-input>
										</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="dialogFormVisible = false">取 消</el-button>
											<!-- dialogFormVisible = false -->
											<el-button type="primary" @click="submitForm('rmform')">修改</el-button>
										</div>
									</el-dialog>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 10px">
						<!-- 分页 -->
						<div style="display: block; float: left; margin-left: 200px;">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
							 :page-sizes="[4, 6, 8,10]" :page-size="pages.pageSize" layout="total, sizes,prev, pager, next, jumper" :total="pages.total">
							</el-pagination>
						</div>
					</div>
				</template>
			</div>
		</div>
		<script type="text/jscript">
			var orderitemtable = ${
				list
			};
			var pageinfo = ${
				pagejson
			};
			var var7 = '';
			var Main = {
				data() {
					return {
						allcomoptions: [{
							value: '0',
							label: '全部数据'
						}],
						allcominfor: '',
						complaintheme: '',
						value7: '',
						inputtheme: '',
					}
				},
				methods: {
					findchange(){
					var pageSize = Max.pasSize;
					var statusid = null;
					var search = null;
					var _this = app3;
					if (this.value7.toString() == "0") {
						window.location.hash = '#/sales/prosale/orderitem';
					} else {
						window.location.hash = '#/sales/prosale/orderitem?statusid=' + this.value7;
						statusid = this.value7;
					}
					this.inputtheme = '';
					$.ajax({
						type: "post",
						url: "/sales/prosale/orderitem",
						data: {
							pageNum: 1,
							pageSize: pageSize,
							statusid: statusid,
							search: search
						},
						success: function(sdata) {
							console.log("页数打印*****：" + sdata);
							_this.oitable = sdata.list;
							_this.pages = sdata;
							_this.currentPage4 = sdata.pageNum;
						}
					});
					},
					search() {
						var pageSize = Max.pasSize;
						var statusid = null;
						var search = null;
						var _this = app3;
						//判断是否带条件;
						//判断是否根据条件筛选
						if (this.value7.toString() == '0' || this.value7.toString() == '') {
							if (this.inputtheme == "") {
								window.location.hash = '#/sales/prosale/orderitem'
							} else {
								window.location.hash = '#/sales/prosale/orderitem?search=' + this.inputtheme;
								search = this.inputtheme;
							}
						} else {
							statusid = this.value7.toString();
							if (this.inputtheme == "") {
								window.location.hash = window.location.hash.split('&')[0];
							} else {
								window.location.hash = window.location.hash.split('&')[0] + '&search=' + this.inputtheme;
								search = decodeURI(this.inputtheme);
							}
						}
						$.ajax({
							type: "post",
							url: "/sales/prosale/orderitem",
							data: {
								pageNum: 1,
								pageSize: pageSize,
								statusid: statusid,
								search: search
							},
							success: function(sdata) {
								console.log("页数打印*****：" + sdata);
								_this.oitable = sdata.list;
								_this.pages = sdata;
								_this.currentPage4 = sdata.pageNum;
							}
						});
					},

				}
			}

			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app1')
			/* 遮罩层 */
			var Main = {

				data() {

					var rulesmonry = (rule, value, callback) => {
						var v = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
						if (value == "") {
							return callback(new Error('总金额不能为空'));
						} else if (!v.test(value)) {
							return callback(new Error('请输入正确的金额'));
						} else {
							callback();
						}
					};
					var ruleorder = (rule, value, callback) => {
						var _this = this;
						if (_this.orderes == "") {
							return callback(new Error('该客户没有订单'));
						} else if (value == "") {
							return callback(new Error('请选择客户'));
						} else {
							callback();
						}
					};
					return {
						options: [],
						optionspay: [],
						formLabelWidth: '120px',
						comcustid: '',
						boo: false,
						oiform: {
							pname: '',
							comcustid: '',
							orderid: '',
							price: '',
							discount: 1,
							count: 0,
							money: 0,
							date: '',
							ptype: '',
							uid: '',
							require: '',
							conditions: '',
							remark: '',
						},
						dialogFormVisible: false,
						rules: {
							comcustid: [
								//{required: true,message: '请选择客户',trigger: 'change'},
								{
									validator: ruleorder = (rule, value, callback) => {
										if (this.boo) {
											return callback(new Error('该客户没有订单'));
										} else if (value == "") {
											return callback(new Error('请选择客户'));
										} else {
											callback();
										}
									},
									trigger: 'change'
								},
								/*{validator: ruleorder,trigger: 'change'}, */
							],
							pname: [{
									required: true,
									message: '请选择产品',
									trigger: 'change'
								},

							],
							orderid: [{
									required: true,
									message: '请选择订单',
									trigger: 'change'
								},

							],
							rmmoney: [{
								validator: rulesmonry,
								trigger: 'change'
							}, ],
							uid: [{
								required: true,
								message: '所有者不能为空',
								trigger: 'change'
							}, ],
							rmpay: [{
								required: true,
								message: '请选择付款方式',
								trigger: 'change'
							}, ],
							rmsort: [{
								required: true,
								message: '请选择分类',
								trigger: 'change'
							}, ],
							date1: [{
								required: true,
								message: '请选择计划回款日期',
								trigger: 'change'
							}],
						},
						customers: [],
						customer: [],
						cumloading: false,
						ordere: [],
						orderes: [],
						orloading: false,
						uitemv: [],
						uitemvs: [],
						uidloading: false,
						product: [],
						products: [],
						proloading: false,
					};
				},
				methods: {
					handleChange(value) {
						this.oiform.money = this.oiform.price * this.oiform.discount * this.oiform.count;
						console.log(value);
					},
					loadAll() {
						return [];
					},
					addoipage() {
						var _this = this;
						axios.post("/sales/prosale/addoipage",
							//参数转换
							//Qs.stringify(this.form,{arrayFormat: 'brackets'})
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							//客户信息
							_this.customers = v.data.customer.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});
							_this.customer = _this.customers;
							//产品信息
							_this.products = v.data.product.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});
							_this.product = _this.products;
							/* _this.uosigns1= v.data.contact.map(item => {
								return { value: item.ID, label: item.name };
							}); */
							/* _this.contactes=v.data.contact; */
							//所有者信息
							_this.uitemvs = v.data.userAll.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});
							_this.uitemv = _this.uitemvs;

							console.log(_this.uitemvs);
							/* _this.optionspay=v.data.opay;
							_this.options=v.data.otype; */
							_this.dialogFormVisible = true;
						}).catch(function() {
							alert("信息出错了");
						});
					},

					querySearchAsync(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
						clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							cb(results);
						}, 3000 * Math.random());
					},
					//加载界面客户
					orremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.orloading = true;
							setTimeout(() => {
								this.orloading = false;
								this.ordere = _this.orderes.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.orloading = true;
							setTimeout(() => {
								this.orloading = false;
								this.ordere = _this.orderes.filter(item => {
									return item.label;
									/* return item.label.toLowerCase()
									   .indexOf(query.toLowerCase()) > -1; */
								});
							}, 200);
						}
					},
					comcustidto() {

						var _this = this;
						_this.customer = _this.customers;
					},
					uitemvto() {
						var _this = this;
						_this.uitemv = _this.uitemvs;
					},
					productto() {
						var _this = this;
						_this.product = _this.products;
					},
					selectoprice() {
						var _this = this;
						axios.post("/sales/prosale/selectoprice",
							Qs.stringify({
								'ID': _this.oiform.pname
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							v.data.proprice.map(item => {
								_this.oiform.price = item.price;
							});
							//_this.orderes
						}).catch(function() {
							alert("信息出错了");
						});
					},
					selectOne() {
						var boo1 = true;
						var _this = this;
						axios.post("/sales/prosale/oiorderpage",
							Qs.stringify({
								'ID': _this.oiform.comcustid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//_this.rmform.orderid=' ';
							_this.orderes = v.data.order.map(item => {
								boo1 = false;
								return {
									value: item.ID,
									label: item.theme
								};
							});
							if (boo1) {
								_this.boo = true;
							} else {
								_this.boo = false;
							}


							//_this.orderes
						}).catch(function() {
							alert("信息出错了");
						});
					},
					//加载界面客户
					cumremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.customer = _this.customers.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},

					//加载界面所有者
					uidremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.uidloading = true;
							setTimeout(() => {
								this.uidloading = false;
								this.uitemv = _this.uitemvs.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//加载界面产品
					proremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.proloading = true;
							setTimeout(() => {
								this.proloading = false;
								this.product = _this.products.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},

					createStateFilter(queryString) {
						return (state) => {
							return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						console.log(item);
					},
					mounted() {
						this.restaurants = this.loadAll();
					},

					submitForm(rmform) {

						this.$refs[rmform].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/sales/prosale/addOrderItem",
									//参数转换
									Qs.stringify(
										this.oiform, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);

									showAtRight('/sales/prosale/orderitem');
								}).catch(function() {
									alert("出错了");
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					}
				}
			}

			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app2')

			var rulesmonry = (rule, value, callback) => {
				var v = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
				if (value == "") {
					return callback(new Error('总金额不能为空'));
				} else if (!v.test(value)) {
					return callback(new Error('请输入正确的金额'));
				} else {
					callback();
				}
			};
			var ruleorder = (rule, value, callback) => {
				var _this = this;
				if (_this.orderes == "") {
					return callback(new Error('该客户没有订单'));
				} else if (value == "") {
					return callback(new Error('请选择客户'));
				} else {
					callback();
				}
			};
			var app3 = new Vue({
				el: "#app3",
				data: {
					options: [],
					optionspay: [],
					formLabelWidth: '120px',
					comcustid: '',
					rmform: {
						ID: '',
						comcustid: '',
						orderid: '',
						date1: '',
						rmmoney: '',
						rmpay: '',
						uid: '',
						rmsort: '',
						rmremark: ''
					},
					dialogFormVisible: false,
					rules: {
						comcustid: [{
								required: true,
								message: '请选择客户',
								trigger: 'change'
							},
							/* {validator: ruleorder,trigger: 'change'},
							{validator: ruleorder,trigger: 'change'}, */
						],
						orderid: [{
							required: true,
							message: '请选择订单',
							trigger: 'change'
						}, ],
						rmmoney: [
							//{required: true,message: '总金额不能为空',trigger: 'change'},
							{
								validator: rulesmonry,
								trigger: 'change'
							},
						],
						uid: [{
							required: true,
							message: '所有者不能为空',
							trigger: 'change'
						}, ],
						rmpay: [{
							required: true,
							message: '请选择付款方式',
							trigger: 'change'
						}, ],
						rmsort: [{
							required: true,
							message: '请选择分类',
							trigger: 'change'
						}, ],
						date1: [{
							required: true,
							message: '请选择计划回款日期',
							trigger: 'change'
						}],
					},
					customers: [],
					customer: [],
					cumloading: false,
					ordere: [],
					orderes: [],
					orloading: false,
					uitemv: [],
					uitemvs: [],
					uidloading: false,
					oitable: orderitemtable,
					pages: pageinfo,
					currentPage4: pageinfo.pageNum,
					multipleSelection: [],
					dialogFormVisible: false,
					dialogDelete: false,
				},
				methods: {
					comcustidto() {
						var _this = this;
						_this.uitemv = _this.uitemvs;
					},
					uitemvto() {
						var _this = this;
						_this.uitemv = _this.uitemvs;
					},
					handleClick(row) {
						console.log(row);
					},
					updatehandleClick(row) {
						var _this = this;
						var id = row;
						console.log(row);
						axios.post("/sales/prosale/updatermpage",
							Qs.stringify({
								'ID': row,
							}, {
								arrayFormat: 'brackets'
							})
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//加载修改页面客户
							_this.customers = v.data.customer.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});
							_this.customer = _this.customers;
							//加载修改页面所有者				  		
							_this.uitemvs = v.data.userAll.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});
							//付款方式信息
							_this.options = v.data.sort;
							//分类信息
							_this.optionspay = v.data.pay;
							_this.uitemv = _this.uitemvs;
							v.data.rmform.map(rmform => {
								_this.rmform.ID = row;
								_this.rmform.comcustid = rmform.custid;
								_this.rmform.orderid = rmform.oid;
								_this.rmform.date1 = rmform.date;
								_this.rmform.rmmoney = rmform.money;
								_this.rmform.rmpay = rmform.rm_pay;
								_this.rmform.rmsort = rmform.sort;
								_this.rmform.rmremark = rmform.remark;
								_this.rmform.uid = rmform.uid;
							});
							_this.selectOne();
						})
						/* .catch(function() {
													alert("出错了");
												} ); */
						this.dialogFormVisible = true;
					},

					addbmppage() {
						var _this = this;
						axios.post("/sales/prosale/addbmppage",
							//参数转换
							//Qs.stringify(this.form,{arrayFormat: 'brackets'})
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							_this.customers = v.data.customer.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});


							/* _this.uosigns1= v.data.contact.map(item => {
								return { value: item.ID, label: item.name };
							}); */
							/* _this.contactes=v.data.contact; */
							_this.uitemvs = v.data.userAll.map(item => {
								return {
									value: item.ID,
									label: item.name
								};
							});

							console.log(_this.uitemvs);
							/* _this.optionspay=v.data.opay;
							_this.options=v.data.otype; */
							_this.dialogFormVisible = true;
						}).catch(function() {
							alert("信息出错了");
						});
					},
					querySearchAsync(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
						clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							cb(results);
						}, 3000 * Math.random());
					},
					//加载界面客户
					orremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.orloading = true;
							setTimeout(() => {
								this.orloading = false;
								this.ordere = _this.orderes.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.orloading = true;
							setTimeout(() => {
								this.orloading = false;
								this.ordere = _this.orderes.filter(item => {
									return item.label;
									/* return item.label.toLowerCase()
									   .indexOf(query.toLowerCase()) > -1; */
								});
							}, 200);
						}
					},
					selectOne() {
						var _this = this;
						axios.post("/sales/prosale/bmporderpage",
							Qs.stringify({
								'ID': _this.rmform.comcustid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							_this.orderes = v.data.order.map(item => {
								return {
									value: item.ID,
									label: item.theme
								};
							});
							//_this.orderes
						}).catch(function() {
							alert("信息出错了");
						});
					},
					//加载界面客户
					cumremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.customer = _this.customers.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},

					//加载界面所有者
					uidremoteMethod(query) {
						var _this = this;
						if (query !== '') {
							this.uidloading = true;
							setTimeout(() => {
								this.uidloading = false;
								this.uitemv = _this.uitemvs.filter(item => {
									return item.label.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},

					handleSizeChange(val) {
						Max.pasSize = val;
						var statusid = null;
						var search = null;
						var _this = this;
						//判断是否带条件;
						var url = window.location.href;
						var url1 = url.indexOf("?");
						if (url1 != -1) {
							//截取每一个条件
							var urlcondition = url.substring(url1 + 1, url.length).split('&');
							for (var i = 0; i < urlcondition.length; i++) {

								if (urlcondition[i].split('=')[0] == "statusid") {
									statusid = decodeURI(urlcondition[i].split('=')[1]);
								}
								if (urlcondition[i].split('=')[0] == "search") {
									search = decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
							type: "post",
							url: "/sales/prosale/orderitem",
							data: {
								pageNum: 1,
								pageSize: val,
								statusid: statusid,
								search: search
							},
							success: function(sdata) {
								console.log("页数打印*****：" + sdata);
								_this.oitable = sdata.list;
								_this.pages = sdata;
								_this.currentPage4 = sdata.pageNum;
							}
						});

					},

					handleCurrentChange(val) {
						//查询的行数
						var pageSize = Max.pasSize;
						var statusid = null;
						var search = null;
						var _this = this;
						//判断是否带条件;
						var url = window.location.href;
						var url1 = url.indexOf("?");
						if (url1 != -1) {
							//this.complaintheme=decodeURI(url.substring(url1+1,url.length).split('&')[0].split('=')[1]);
							//截取每一个条件
							var urlcondition = url.substring(url1 + 1, url.length).split('&');
							for (var i = 0; i < urlcondition.length; i++) {

								if (urlcondition[i].split('=')[0] == "statusid") {
									statusid = decodeURI(urlcondition[i].split('=')[1]);
								}
								if (urlcondition[i].split('=')[0] == "search") {
									search = decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
							type: "post",
							url: "/sales/prosale/orderitem",
							data: {
								pageNum: val,
								pageSize: pageSize,
								statusid: statusid,
								search: search
							},
							success: function(sdata) {
								console.log("页数打印*****：" + sdata);
								_this.oitable = sdata.list;
								_this.pages = sdata;
								_this.currentPage4 = sdata.pageNum;
							}
						});
					},

					loadAll() {
						return [];
					},
					querySearchAsync(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

						clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							cb(results);
						}, 3000 * Math.random());
					},
					createStateFilter(queryString) {
						return (state) => {
							return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						console.log(item);
					},
					mounted() {
						this.restaurants = this.loadAll();
					},

					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/sales/prosale/updaterm",
									//参数转换
									Qs.stringify(this.rmform, {
										arrayFormat: 'brackets'
									})
									//id:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									showAtRight('/sales/prosale/returnMoney');
								}).catch(function() {
									alert("出错了");
								});


							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					deletenew(ID) {
						this.ID = ID;
						this.dialogDelete = true;

					},
					//删除方法
					Delete() {
						var _this = this;
						axios.post("/sales/prosale/deleterm",
							//参数转换
							Qs.stringify({
								'ID': _this.ID
							}, {
								arrayFormat: 'brackets'
							})
							//ajax请求成功的回调函数
						).then(function(response) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(response.data);
							/* this.$message({
														type: 'success',
														message: '删除成功!'
													}); */
							alert("删除成功！");
							showAtRight('/sales/prosale/returnMoney');

						})
						/* .catch(function(){
											   		alert("删除失败！");
											   		/*this.$message({
														type: 'error',
														message: '删除失败!'
													}); */

						//这个是数据的初始化
					}
				},
			})
		</script>
	</body>

</html>
